<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-once</title>
	<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--动态组件-->
<component :is="type"></component>
<!--<childone v-if="type === 'childone'"></childone>
<childtwo v-if="type === 'childtwo'"></childtwo>-->
<button @click="handleclick">change</button>
</div>

<script>
	Vue.component('childone',{
		template:`<div v-once>childone</div>`
	})
	Vue.component('childtwo',{
        template: `<div v-once>childtwo</div>`
	})
	let app = new Vue({
		el: "#app",
		data:{
		type:'childone'
		},
		methods:{
			handleclick:function(){
                 this.type = (this.type === 'childone' ? 'childtwo' : 'childone')
				//本身是childone的话让他为childtwo否则为childone,然后在赋给this.type
			}
		}
	})
</script>
<!--
vue自带的动态组件标签:component
v-once:第一次渲染后存于内存中,可以提高性能,不然vue得重复的创建和销毁元素
-->
</body>
</html>